<template>
  <div class="product-preview">
    <div class="preview-container">
      <!-- 左侧：商品图片/视频 -->
      <div class="preview-left">
        <!-- 主图/主视频 -->
        <div class="main-media">
          <video
            v-if="productData.productInfo.video"
            :src="productData.productInfo.video"
            controls
            class="main-video"
          ></video>
          <img
            v-else-if="productData.productInfo.images && productData.productInfo.images.length > 0"
            :src="productData.productInfo.images[0]"
            alt="主图"
            class="main-image"
          >
          <div v-else class="no-media">
            <el-empty description="暂无图片" />
          </div>
        </div>

        <!-- 图片列表 -->
        <div v-if="productData.productInfo.images && productData.productInfo.images.length > 1" class="image-list">
          <div
            v-for="(image, index) in productData.productInfo.images"
            :key="index"
            class="image-item"
            :class="{ active: currentImageIndex === index }"
            @click="currentImageIndex = index"
          >
            <img :src="image" alt="">
          </div>
        </div>
      </div>

      <!-- 右侧：商品信息 -->
      <div class="preview-right">
        <h2 class="product-name">{{ productData.productInfo.name || '商品名称' }}</h2>
        
        <div v-if="productData.productInfo.sellingPoint" class="selling-point">
          {{ productData.productInfo.sellingPoint }}
        </div>

        <div class="price-section">
          <div class="price-row">
            <span class="label">商品售价：</span>
            <span class="price">¥{{ productData.productInfo.price || '0.00' }}</span>
          </div>
          <div v-if="productData.productInfo.marketPrice" class="price-row">
            <span class="label">市场价：</span>
            <span class="market-price">¥{{ productData.productInfo.marketPrice }}</span>
          </div>
        </div>

        <div class="info-row">
          <span class="label">商品类型：</span>
          <span>{{ productData.productInfo.type }}</span>
        </div>

        <div class="info-row">
          <span class="label">商品分类：</span>
          <span>{{ getCategoryPath }}</span>
        </div>

        <div v-if="brandName" class="info-row">
          <span class="label">商品品牌：</span>
          <span>{{ brandName }}</span>
        </div>

        <div v-if="productData.productInfo.deliveryMethod" class="info-row">
          <span class="label">配送方式：</span>
          <span>{{ productData.productInfo.deliveryMethod }}</span>
        </div>

        <!-- SKU选择 -->
        <div v-if="productData.specs.selectedSaleAttrs && productData.specs.selectedSaleAttrs.length > 0" class="sku-section">
          <div
            v-for="attrName in productData.specs.selectedSaleAttrs"
            :key="attrName"
            class="sku-row"
          >
            <span class="label">{{ attrName }}：</span>
            <div class="sku-values">
              <el-tag
                v-for="value in getAttrValues(attrName)"
                :key="value"
                class="sku-tag"
                :type="selectedSku[attrName] === value ? '' : 'info'"
                @click="selectSkuAttr(attrName, value)"
              >
                {{ value }}
              </el-tag>
            </div>
          </div>

          <!-- 选中的SKU信息 -->
          <div v-if="currentSku" class="current-sku">
            <div class="sku-info-row">
              <span class="label">价格：</span>
              <span class="sku-price">¥{{ currentSku.salePrice }}</span>
            </div>
            <div class="sku-info-row">
              <span class="label">库存：</span>
              <span>{{ currentSku.stock }} {{ currentSku.stockUnit }}</span>
            </div>
            <div v-if="currentSku.warehouseLocation" class="sku-info-row">
              <span class="label">发货地：</span>
              <span>{{ currentSku.warehouseLocation }}</span>
            </div>
          </div>
        </div>

        <div v-if="productData.productInfo.remark" class="remark-section">
          <div class="label">商品备注：</div>
          <div class="remark-content">{{ productData.productInfo.remark }}</div>
        </div>
      </div>
    </div>

    <!-- 商品描述 -->
    <div v-if="productData.description" class="description-section">
      <h3>商品描述</h3>
      <div class="description-content" v-html="productData.description"></div>
    </div>

    <!-- 模板信息 -->
    <div v-if="productData.template" class="template-section">
      <h3>商品模板</h3>
      <div class="template-info">
        <img :src="productData.template.image" alt="" class="template-image">
        <div>
          <div class="template-name">{{ productData.template.name }}</div>
          <div class="template-desc">{{ productData.template.description }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { brandData } from '../../utils/productMock'

export default {
  name: 'ProductPreview',
  props: {
    productData: {
      type: Object,
      required: true
    }
  },
  setup(props) {
    const currentImageIndex = ref(0)
    const selectedSku = ref({})

    // 获取品牌名称
    const brandName = computed(() => {
      if (props.productData.productInfo.brand) {
        const brand = brandData.find(b => b.id === props.productData.productInfo.brand)
        return brand ? brand.name : ''
      }
      return ''
    })

    // 获取分类路径
    const getCategoryPath = computed(() => {
      const { category } = props.productData
      if (category.level1Name && category.level2Name && category.level3Name) {
        return `${category.level1Name} / ${category.level2Name} / ${category.level3Name}`
      }
      return '未选择'
    })

    // 获取属性值列表
    const getAttrValues = (attrName) => {
      const values = props.productData.specs.selectedAttrValues?.[attrName]
      return values || []
    }

    // 选择SKU属性
    const selectSkuAttr = (attrName, value) => {
      selectedSku.value[attrName] = value
    }

    // 当前选中的SKU
    const currentSku = computed(() => {
      if (!props.productData.specs.skuList || props.productData.specs.skuList.length === 0) {
        return null
      }

      const selectedAttrs = props.productData.specs.selectedSaleAttrs || []
      const isAllSelected = selectedAttrs.every(attr => selectedSku.value[attr])
      
      if (!isAllSelected) {
        return null
      }

      return props.productData.specs.skuList.find(sku => {
        return selectedAttrs.every(attr => sku[attr] === selectedSku.value[attr])
      })
    })

    return {
      currentImageIndex,
      selectedSku,
      brandName,
      getCategoryPath,
      getAttrValues,
      selectSkuAttr,
      currentSku
    }
  }
}
</script>

<style scoped>
.product-preview {
  padding: 20px;
}

.preview-container {
  display: flex;
  gap: 30px;
  margin-bottom: 30px;
}

.preview-left {
  flex: 0 0 400px;
}

.main-media {
  width: 100%;
  height: 400px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  background-color: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;
}

.main-video,
.main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.no-media {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-list {
  display: flex;
  gap: 10px;
  margin-top: 10px;
  overflow-x: auto;
}

.image-item {
  flex: 0 0 80px;
  height: 80px;
  border: 2px solid #dcdfe6;
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s;
}

.image-item:hover,
.image-item.active {
  border-color: #409eff;
}

.image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.preview-right {
  flex: 1;
}

.product-name {
  margin: 0 0 15px 0;
  font-size: 24px;
  color: #303133;
}

.selling-point {
  padding: 10px 15px;
  background-color: #fff3e0;
  border-left: 3px solid #ff9800;
  color: #e65100;
  margin-bottom: 20px;
  line-height: 1.6;
}

.price-section {
  padding: 15px;
  background-color: #fff3f3;
  border-radius: 4px;
  margin-bottom: 20px;
}

.price-row {
  margin-bottom: 8px;
}

.price-row:last-child {
  margin-bottom: 0;
}

.price {
  font-size: 28px;
  color: #f56c6c;
  font-weight: bold;
}

.market-price {
  color: #909399;
  text-decoration: line-through;
}

.info-row {
  padding: 10px 0;
  border-bottom: 1px solid #f0f0f0;
}

.info-row .label {
  color: #909399;
  margin-right: 10px;
}

.sku-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 4px;
}

.sku-row {
  margin-bottom: 15px;
  display: flex;
  align-items: flex-start;
}

.sku-row:last-child {
  margin-bottom: 0;
}

.sku-row .label {
  color: #606266;
  font-weight: 500;
  min-width: 80px;
  padding-top: 5px;
}

.sku-values {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sku-tag {
  cursor: pointer;
  transition: all 0.3s;
}

.sku-tag:hover {
  transform: translateY(-2px);
}

.current-sku {
  margin-top: 15px;
  padding-top: 15px;
  border-top: 1px solid #dcdfe6;
}

.sku-info-row {
  margin-bottom: 8px;
}

.sku-info-row .label {
  color: #909399;
  margin-right: 10px;
}

.sku-price {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
}

.remark-section {
  margin-top: 20px;
  padding: 15px;
  background-color: #f0f9ff;
  border-radius: 4px;
}

.remark-section .label {
  font-weight: 500;
  color: #606266;
  margin-bottom: 8px;
}

.remark-content {
  color: #606266;
  line-height: 1.6;
}

.description-section,
.template-section {
  margin-top: 30px;
  padding: 20px;
  background-color: #fff;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
}

.description-section h3,
.template-section h3 {
  margin: 0 0 15px 0;
  font-size: 18px;
  color: #303133;
  padding-bottom: 10px;
  border-bottom: 2px solid #409eff;
}

.description-content {
  line-height: 1.8;
  color: #606266;
}

.description-content :deep(img) {
  max-width: 100%;
  height: auto;
}

.template-info {
  display: flex;
  align-items: center;
  gap: 20px;
}

.template-image {
  width: 200px;
  height: 150px;
  object-fit: cover;
  border-radius: 4px;
}

.template-name {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin-bottom: 8px;
}

.template-desc {
  color: #909399;
  font-size: 14px;
}
</style>
